<template>
	<view class="my-layout">
		<view class="card" :style="{backgroundImage:`url(${currentBg})`}">
			<view class="card-back">
				<view class="">
					<text class="back-text">今日购物佣金</text>
					<text class="back-num">佣金{{num}}%</text>
				</view>
				<view class="money-num">
					{{myMoney}}
				</view>
			</view>
			<view class="card-bottom">
				<view class="bottom-left">
					<view class="btm-top">今日已购物单数</view>
					<view class="btm-btm">22</view>
				</view>
				<view class="bottom-right">
					<view class="btm-top">团队购物佣金</view>
					<view class="btm-btm">68,809.00</view>
				</view>
			</view>
		</view>
		<view class="card-btn">
			<u-button type="warning" @tap='startShop'>智能购物</u-button>
		</view>
		<view class="card-btn">
			<u-button type="warning" plain class="custom-style" @tap='stopShop'>停止购物</u-button>
		</view>
		<view class="card-message">
			<view class="msg-title">购物说明</view>
			<view class="msg-desc">
				平台将订单匹配给用户的同时，平台将该笔订单的信息提交到商家后台，若用户在2分钟内不提交订单，为了规避平台监管，该笔订单会被取消。
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentBg:'/static/shop/bg1.png',
				num:0.2,
				myMoney:'6969.00'
			};
		},
		onLoad:function(data){
			uni.setNavigationBarTitle({
				title:data.name
			})
		},
		methods:{
			// 开始匹配
			startShop(){
				uni.showToast({
					title:'匹配中...',
					icon:'loading',
					duration:99999999,
				})
				setTimeout(function(){
					uni.hideToast()
					uni.showToast({
						title:'匹配成功',
						icon:'success',
						duration:600
					})
					uni.navigateTo({
						url:'/pages/shopping/order/order'
					})
				},6000)
			}
		}
	}
</script>

<style lang="scss" scoped>
.custom-style{
	background-color: #FFFFFF!important;
}
.my-layout{
	background-color: #F4F5F9;
	padding: 20rpx 40rpx;
}
.card{
	height: 320rpx;
	padding: 15rpx 26rpx;
	background-size: 100% 100%;
	color: #FFFFFF;
	.back-text{
		font-size: 30rpx;
		height: 42rpx;
		line-height: 42rpx;
	}
	.back-num{
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 24rpx;
		margin-left: 10rpx;
		background-color: #FFFFFF;
		text-align: center;
		color: #F59328;
		font-size: 28rpx;
		border-radius: 20rpx;
	}
	.money-num{
		font-size: 54rpx;
		font-family: 'DINAlternate-Bold';
		height: 63rpx;
		line-height: 63rpx;
		margin: 24rpx 0 40rpx 0;
	}
	
	.card-bottom{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;
		.btm-top{
			font-size: 28rpx;
			height: 40rpx;
			line-height: 40rpx;
		}
		.btm-btm{
			font-size: 42rpx;
			height: 48rpx;
			line-height: 48rpx;
		}
	}
}
.card-btn{
	margin-top: 50rpx;
}
.card-message{
	margin-top: 70rpx;
	.msg-title{
		font-size: 30rpx;
		height: 42rpx;
		line-height: 42rpx;
		color: #000000;
		margin-bottom: 30rpx;
	}
	.msg-desc{
		font-size: 28rpx;
		line-height: 40rpx;
		color: #666666;
	}
}
</style>
